import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import type { SwiperItemProps } from '../../teacher/interface'
import { Space } from 'antd-mobile'

export const FirstPlatformDetail = (props: SwiperItemProps) => {
    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })

    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page}>
            <div className={styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>2024</p>
                    <p>平台也在努力提升自己</p>
                    <p>
                        全面升级为<span>7.5</span>版本，上线内容：
                    </p>
                    <Space direction="vertical" style={{ marginTop: '16px' }}>
                        <p>一、赛事支持服务：</p>
                        <p>
                            支持马兰花<span>讲师大赛</span>门户配置，参赛选手<span>在线报名</span>
                        </p>
                        <p>
                            主管部门<span>在线审核</span>，一键下载报名材料
                        </p>
                        <p>
                            支持 <span>现场、线上评审</span>，成绩同步
                        </p>
                    </Space>
                </div>
            </div>
        </div>
    )
}
